<template>
  <div class="m-address">
    <!-- 地址信息 -->
    <adr-info></adr-info>
    <!-- 交易记录、token记录 -->
    <div class="adr-tx-record table-shadow">
      <div class="head">
        <span :class="{'active-tab':tab===0}" @click="tab=0">{{$t('address.record')}}</span>
        <span :class="{'active-tab':tab===1}" @click="tab=1">{{$t('address.tokenRecord')}}</span>
      </div>
      <div class="trade-select">
        <el-select
          v-model="txType"
          placeholder="please choose trade's type"
          size="small"
          class="tx-select"
          @change="filterTrade"
        >
          <el-option
            class="trade-option"
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <span class="total">
          {{$t('address.txTotal',[showTotal])}}
          <span
            v-if="showTotal>10000"
          >（{{$t('address.last',[pages.total])}}）</span>
        </span>
      </div>
      <!-- 表格部分 -->
      <el-table :data="Trades" stripe style="width: 100%" class="data-table">
        <el-table-column :label="$t('trade.hash')" width="188">
          <template slot-scope="item">
            <router-link :to="`/tradeHash?hash=${item.row.hash}`" class="light flex-left">
              <i
                class="iconfont err-ico"
                :class="{'iconjinggao-chucuo':item.row.success===false&&item.row.is_para===false}"
              ></i>
              {{item.row.hash|filterHash}}
            </router-link>
          </template>
        </el-table-column>
        <el-table-column :label="$t('trade.sender')" width="190">
          <template slot-scope="item">
            <router-link
              :to="`/address?address=${item.row.from}`"
              :class="{light:item.row.from!==addr,base:item.row.from===addr}"
            >{{item.row.from|filterHash}}</router-link>
          </template>
        </el-table-column>
        <el-table-column width="60">
          <template slot-scope="item">
            <i class="iconfont" :class="{iconchu:item.row.from===addr,iconjin:item.row.to===addr}"></i>
          </template>
        </el-table-column>
        <el-table-column :label="$t('trade.receiver')" width="200">
          <template slot-scope="item">
            <router-link
              :to="`/address?address=${item.row.to}`"
              :class="{light:item.row.to!==addr,base:item.row.to===addr}"
            >{{item.row.to|filterHash}}</router-link>
          </template>
        </el-table-column>
        <el-table-column :label="$t('trade.num')" min-width="150">
          <template slot-scope="item">{{item.row|TradeValue}}</template>
        </el-table-column>
        <el-table-column :label="$t('trade.fee')" width="110">
          <template slot-scope="item">{{item.row.fee|filterFee}}</template>
        </el-table-column>
        <el-table-column :label="$t('trade.func')" width="120">
          <template
            slot-scope="item"
          >{{item.row.action_name==="unknown"?'none':item.row.action_name}}</template>
        </el-table-column>
        <el-table-column :label="$t('trade.time')" width="170">
          <template slot-scope="item">{{item.row.block_time|formatTime}}</template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 底部分页 -->
    <div class="bottom-page flex-right" v-if="Trades.length!==0">
      <page-container
        @pageChange="pageChange"
        @sizeChange="sizeChange"
        :currentPage="pages.number"
        :pageSize="pages.size"
        :total="pages.total"
      ></page-container>
    </div>
  </div>
</template>
<script>
import AdrInfo from "./AdrInfos";
import PageContainer from "@/components/mobile/PageContainer.vue";
import addrBase from "@/mixins/Address/addressRecord.js";
export default {
  mixins: [addrBase],
  components: {
    AdrInfo,
    PageContainer
  }
};
</script>

<style lang="scss">
.m-address {
  padding: 20px;
  .adr-tx-record {
    margin: 30px 0 15px;
    background: $white;
    .iconfont {
      font-size: 20px;
      color: #9aaab9;
    }
    .iconjin {
      color: #6ca89b;
    }
    .iconchu {
      color: #eb827c;
    }
    .err-ico {
      color: #e45359;
      font-size: 12px;
      width: 13px;
      margin-right: 5px;
      display: inline-flex;
    }
    .head {
      height: 47px;
      padding: 0 10px;
      border-bottom: 1px solid #ececec;
      span {
        display: inline-block;
        height: 100%;
        min-width: 72px;
        line-height: 47px;
        font-size: 14px;
        font-family: PingFangSC-Semibold;
        font-weight: 500;
        text-align: center;
        color: $black;
        cursor: pointer;
        transition: 0.5s;
      }
      span:last-child {
        margin-left: 30px;
        // width: 110px;
      }
      .active-tab {
        color: $blue;
        border-bottom: 2px solid $blue;
      }
    }
    .trade-select {
      margin: 10px;
      .total {
        display: inline-block;
        margin-top: 10px;
        font-size: 12px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: $font_grey;
      }
      .el-input__inner {
        border-radius: 25px;
      }
    }
  }
  .data-table {
    font-size: 12px;
  }
  .el-table th:nth-of-type(1) .cell {
    padding-left: 30px;
  }
}
.trade-option {
  color: $black;
  transition: 0.3s;
}
.trade-option.hover {
  color: #dd9e2d;
}
</style>